<!--
    门禁主机
 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>门禁主机</div>
            <div style="margin-left: auto;">
                <el-button v-show="tableData.length > 0" :disabled="deviceOptBatch" class="btn btn-blue"
                    icon="el-icon-delete" size="small" type="danger" @click="batchDoorGuardHandler()">批量删除
                </el-button>
                <el-button v-show="tableData.length > 0" :disabled="deviceOptBatch" class="btn btn-blue" size="small"
                    type="primary" @click="batchDeviceOperationHandler()">批量操作
                </el-button>
                <el-button v-show="tableData.length > 0" :disabled="deviceOptBatch" class="btn btn-blue" size="small"
                    type="primary" @click="batchDeviceUpgrade()">批量升级
                </el-button>
                <el-button size="small" type="primary" @click="showDialog('bindEng')">添加绑定</el-button>
            </div>
        </div>
        <div class="query">
            <el-form :ref="query" :form="query" :inline="true" label-width="5em">
                <el-form-item label="门禁类型">
                    <el-select v-model="query.deviceType" size="small" style="width: 120px">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备型号">
                    <el-select style="width: 120px" v-model="query.doorDeviceType" size="small">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option v-for="(value, key) in doorDeviceTypeList" :key="value.label" :label="value.label"
                            :value="value.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="门禁状态">
                    <el-select v-model="query.status" size="small" style="width: 120px">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keywords" placeholder="设备MAC、门禁机名称、版本号" size="small"></el-input>
                </el-form-item>
                <el-form-item v-show="false" label="最后登录时间" label-width="7em">
                    <el-date-picker v-model="query.lastLoginTime" end-placeholder="结束时间" size="small"
                        start-placeholder="开始时间" type="daterange" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button size="small" type="primary" @click="gitList">查询</el-button>
                    <el-button size="small" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border @selection-change="selectEvent">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="门禁类型" prop="deviceType" align="center" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.deviceType == 1 ? '单元机' : '围墙机' }}
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="门禁机名称" prop="deviceName" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="设备MAC" prop="deviceUuid" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="版本号" align="center">
                    <template slot-scope="scope">
                        <p>
                            {{ (scope.row.versionName || '') + (scope.row.versionCode ? '(' + scope.row.versionCode +
                                    ')' : '')
                            }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="方向" prop="direction" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.direction === 1 ? '出口' : '入口' }}
                    </template>
                </el-table-column>
                <el-table-column label="启动次数" prop="rebootTimes" align="center">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="最近在线时间" prop="refreshTimeForat" align="center">
                </el-table-column>
                <el-table-column label="门卡数" prop="realCardCount" align="center">
                    <template slot-scope="scope">
                        {{
                                scope.row.doorDeviceType != 60 && scope.row.doorDeviceType != 40 ? scope.row.cardTotal :
                                    scope.row.realCardCount
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="estateId" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="judgeOnlineStatusType(scope.row.onlineStatus).type">
                            {{ judgeOnlineStatusType(scope.row.onlineStatus).label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="信息" prop="position" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="right" trigger="click">
                            <p>门禁机ID：{{ scope.row.doorGuardId }}</p>
                            <p>安装地点：{{ scope.row.position }}</p>
                            <p>安装时间：{{ scope.row.createDate }}</p>
                            <p>同步库：{{ scope.row.mdbName }}</p>
                            <p>设备序列号：{{ scope.row.deviceSn }}</p>
                            <p>设备蓝牙：{{ scope.row.bluetoothName }}</p>
                            <p>设备密钥：{{ scope.row.deviceKey }}</p>
                            <p>辅助服务版本：{{ scope.row.asVersion }}</p>
                            <p>系统固件版本：{{ scope.row.sysVersion }}</p>
                            <p>IMEI: {{ scope.row.simImei }}</p>
                            <p>SIM卡卡号: {{ scope.row.simIccid }}</p>
                            <p>用户识别码: {{ scope.row.simImsi }}</p>
                            <p v-if="scope.row.doorDeviceType == 60">设备总卡数: {{ scope.row.cardTotal }} 有效卡:
                                {{ scope.row.cardValid }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">查看</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-dropdown split-button size="small" trigger="click" type="primary"
                            @click="deviceOperationHandler(scope.row.deviceUuid, scope.row.deviceName)"
                            @command="onItemClick($event, scope.row)">操作
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="card" icon="el-icon-postcard" disabled>门禁卡
                                </el-dropdown-item>
                                <el-dropdown-item command="edit" icon="el-icon-edit">编辑
                                </el-dropdown-item>
                                <el-dropdown-item command="delete" icon="el-icon-delete">删除
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination-wrap">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[5, 10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 设备升级 开始-->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
            :title="'设备升级[' + batchTargetDeviceLength + ']'" :visible.sync="deviceUpgradeDialog" width="500px">
            <el-form :model="deviceUpgradeForm" class="form-panel" label-width="120px">
                <span v-if="selectedDoorGuardInfo.deviceName">当前版本</span>
                <div v-if="selectedDoorGuardInfo.deviceName">
                    <el-form-item label="门禁apk">
                        <el-input
                            :value="selectedDoorGuardInfo.versionName + '(' + selectedDoorGuardInfo.versionCode + ')'"
                            readonly></el-input>
                    </el-form-item>
                    <el-form-item label="辅助服务">
                        <el-input v-model="selectedDoorGuardInfo.asVersion" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="单片机固件">
                        <el-input v-model="selectedDoorGuardInfo.mcuVersion" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="系统固件">
                        <el-input v-model="selectedDoorGuardInfo.sysVersion" readonly></el-input>
                    </el-form-item>
                </div>
                <span>升级</span>
                <el-form-item label="设备型号" v-if="showSelectDeviceType">
                    <el-select style="width: 120px" v-model="deviceUpgradeForm.doorDeviceType" size="small"
                        @change="onDeviceTypeChange()">
                        <el-option label="全部" :value="null"></el-option>
                        <el-option v-for="(value, key) in doorDeviceTypeList" :key="value.label" :label="value.label"
                            :value="value.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="软件类型">
                    <el-select v-model="deviceUpgradeForm.type" placeholder="请选择" size="small"
                        @change="getDoorGuardVersionList()">
                        <el-option :value="null" label="请选择"></el-option>
                        <el-option :value="0" label="门禁apk"></el-option>
                        <el-option :value="1" label="辅助服务"></el-option>
                        <el-option :value="2" label="单片机"></el-option>
                        <el-option :value="3" label="系统固件"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="软件版本">
                    <el-select v-model="deviceUpgradeForm.id" placeholder="请选择" size="small">
                        <el-option v-for="(item, index) in doorGuardVersionList" :key="item.versionName"
                            :label="item.versionName + '(' + item.versionCode + ')'" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="deviceUpgradeForm.type == 0" label="安装类型">
                    <el-select v-model="deviceUpgradeForm.uninstallFirst" placeholder="请选择" size="small">
                        <el-option key="覆盖安装" :value="0" label="覆盖安装(默认)"></el-option>
                        <el-option key="卸载安装" :value="1" label="卸载安装"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="deviceUpgradeForm.type == 0" label="安装方式">
                    <el-select v-model="deviceUpgradeForm.installType" placeholder="请选择" size="small">
                        <el-option key="辅助服务" :value="1" label="辅助服务(默认)"></el-option>
                        <el-option key="Launcher" :value="0" label="Launcher"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :disabled="!deviceUpgradeForm.id" type="success"
                    @click="doorGuardVersionUpgrade">更新</el-button>
                <el-button type="danger" @click="deviceUpgradeDialog = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 设备升级  结束-->
        <!--    设备操作 开始-->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="'设备操作-' + targetDeviceName"
            :visible.sync="deviceOperation" width="500px">
            <div style="margin-bottom: 20px;" @click="onClickCount">提示：部分设备只支持部门部分功能</div>
            <el-row>
                <el-button icon="el-icon-refresh" type="primary" @click="deviceHandler('请求重启APP')">重启APP</el-button>
            </el-row>
            <br />
            <el-row>
                <el-button icon="el-icon-refresh" type="primary" @click="remoteOpen()">远程开门</el-button>
            </el-row>
            <br />
            <el-row>
                <el-button icon="el-icon-refresh" type="primary" @click="deviceHandler('请求下发参数')">下发参数</el-button>
            </el-row>
            <br />
            <el-row v-show="failureList.length > 0">
                <span>更新失败的设备</span>
                <p v-for="item in failureList" v-text="item"></p>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button v-show="isUpdateApp" type="success" @click="clickUpdateAppHandler">更 新</el-button>
                <el-button type="danger" @click="deviceOperation = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!--    设备操作 结束-->
        <!--    表单 开始-->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="dialogTitle"
            :visible.sync="dialogVisible" width="70%">
            <el-form ref="bindEngForm" :model="bindEngForm" :rules="rules" class="visitorForm" label-width="140px">
                <span class="tips">基础配置</span>
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="设备型号" required>
                            <el-select v-model="bindEngForm.doorDeviceType" size="small">
                                <el-option v-for="(value, key) in doorDeviceTypeList" :key="value.label"
                                    :label="value.label" :value="value.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="span" v-if="bindEngForm.doorDeviceType != 60">
                        <el-form-item label="设备SN码" prop="deviceUuid" required>
                            <el-input v-model="bindEngForm.deviceUuid" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span" v-if="bindEngForm.doorDeviceType == 60">
                        <el-form-item label="设备SN码" prop="bluetoothName" required>
                            <el-input v-model="bindEngForm.bluetoothName" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="span">-->
                    <!--   <el-form-item label="小区名称">-->
                    <!--     <el-input v-model="bindEngForm.estateName"-->
                    <!--               placeholder="请输入小区名称"-->
                    <!--               readonly-->
                    <!--               size="small"></el-input>-->
                    <!--   </el-form-item>-->
                    <!-- </el-col>-->
                    <el-col :span="span">
                        <el-form-item label="门禁机名称" prop="deviceName" required>
                            <el-input v-model="bindEngForm.deviceName" placeholder="请输入门禁机名称" size="small"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="span">
                        <el-form-item label="门禁类型" required>
                            <el-select v-model="bindEngForm.deviceType" size="small" @change="deviceTypeChange">
                                <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="绑定区域" required>
                            <el-col style="width: 190px">
                                <!--<el-form-item-->
                                <!--:prop="'roomId'"-->
                                <!--:rules="{-->
                                <!--required: true,-->
                                <!--message: '请选择房间'-->
                                <!--}">-->
                                <el-form-item>
                                    <el-select v-model="bindEngForm.estateId" placeholder="小区" size="small"
                                        @change="estateChange(0, $event)">
                                        <el-option v-for="opt in estateList" :key="opt.label" :disabled="opt.disabled"
                                            :label="opt.label" :value="opt.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="bindEngForm.deviceType !== 2" style="width: 190px">
                                <el-form-item :prop="'alleyId'" label-width="0">
                                    <el-select v-model="bindEngForm.alleyId" placeholdder="街巷" size="small"
                                        @change="alleyChange(0, $event)">
                                        <el-option v-for="opt in alleyList" :key="opt.value" :label="opt.label"
                                            :value="opt.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="bindEngForm.deviceType !== 2" style="width: 190px">
                                <el-form-item :prop="'buildingId'">
                                    <el-select v-model="bindEngForm.buildingId" placeholder="楼栋" size="small"
                                        @change="buildingChange(0, $event)">
                                        <el-option v-for="opt in buildingList" :key="opt.value" :disabled="opt.disabled"
                                            :label="opt.label" :value="opt.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="bindEngForm.deviceType === 3 || bindEngForm.deviceType === 4"
                                style="width: 190px">
                                <!--<el-form-item-->
                                <!--:prop="'floorId'"-->
                                <!--:rules="{-->
                                <!--required: true,-->
                                <!--message: '请选择楼层'-->
                                <!--}">-->
                                <el-form-item>
                                    <el-select v-model="bindEngForm.floorId" placeholder="楼层" size="small"
                                        @change="floorChange(0, $event)">
                                        <el-option v-for="opt in floorList" :key="opt.value" :disabled="opt.disabled"
                                            :label="opt.label" :value="opt.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col v-if="bindEngForm.deviceType === 4" style="width: 190px">
                                <!--<el-form-item-->
                                <!--:prop="'roomId'"-->
                                <!--:rules="{-->
                                <!--required: true,-->
                                <!--message: '请选择房间'-->
                                <!--}">-->
                                <el-form-item>
                                    <el-select v-model="bindEngForm.roomId" placeholder="房间" size="small"
                                        @change="roomChange(0, $event)">
                                        <el-option v-for="opt in roomList" :key="opt.value" :disabled="opt.disabled"
                                            :label="opt.label" :value="opt.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="bindEngForm.deviceType === 2">
                    <el-col :span="24">
                        <el-form-item label="所在分区">
                            <el-select v-model="bindEngForm.areaId" placeholder="请选择" size="small">
                                <el-option label="不分区" :value="0"></el-option>
                                <el-option v-for="opt in areaList" :key="opt.name" :disabled="opt.disabled"
                                    :label="opt.name" :value="opt.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="span">
                        <el-form-item label="经纬度" prop="latAndLong">
                            <el-input v-model="bindEngForm.latAndLong" placeholder="可不填,默认为所在小区或楼栋的经纬度" size="small"
                                type="text">
                                <el-button slot="append" icon="el-icon-location"
                                    onclick="window.open('http://api.map.baidu.com/lbsapi/getpoint/index.html')"></el-button>
                                <!--<i slot="suffix" class="el-icon-location" onclick="window.open('http://api.map.baidu.com/lbsapi/getpoint/index.html')"></i>-->
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="门锁类型">
                            <el-select v-model="bindEngForm.controlType" size="small">
                                <el-option key="电控" :value="0" label="电控"></el-option>
                                <el-option key="电磁" :value="1" label="电磁"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="span">
                        <el-form-item label="方向">
                            <el-select v-model="bindEngForm.direction" size="small">
                                <el-option key="入口" :value="0" label="入口"></el-option>
                                <el-option key="出口" :value="1" label="出口"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="span">
                        <el-form-item label="安装位置">
                            <el-select v-model="bindEngForm.installPosition" size="small">
                                <el-option v-for="item in installPositionList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <span class="tips" style="cursor: pointer" @click="showAdvanceConfig = !showAdvanceConfig">更多配置</span>
                <div v-show="showAdvanceConfig">
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="人脸识别">
                                <el-switch v-model="bindEngForm.openFrc" :active-value="0" :inactive-value="-1"
                                    active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="活体认证">
                                <el-switch v-model="bindEngForm.livingBody" :active-value="1"
                                    :disabled="bindEngForm.openFrc === -1" :inactive-value="0" active-color="#13ce66"
                                    inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col v-show="false" :span="4">
                            <el-form-item label="IR摄像头">
                                <el-switch v-model="bindEngForm.openIrCamera" :active-value="1"
                                    :disabled="bindEngForm.openFrc === -1" :inactive-value="0" active-color="#13ce66"
                                    inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col v-show="false" :span="4">
                            <el-form-item label="IR摄像头增强">
                                <el-switch v-model="bindEngForm.openIrCameraPlus" :active-value="1"
                                    :disabled="bindEngForm.openFrc === -1" :inactive-value="0" active-color="#13ce66"
                                    inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="span">
                            <el-form-item label="人脸识别阈值">
                                <el-slider v-model="bindEngForm.faceSimilarity"
                                    :disabled="bindEngForm.openFrc === -1"></el-slider>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="补光灯">
                                <el-select v-model="bindEngForm.openFlashLed" placeholder="补光灯" size="small">
                                    <el-option key="常关" :value="0" label="常关"></el-option>
                                    <el-option key="常亮" :value="1" label="常亮"></el-option>
                                    <el-option key="人体感应" :value="2" label="人体感应"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-show="false">
                        <el-col :span="12">
                            <el-form-item label="补光灯光线强度">
                                <el-input v-model="bindEngForm.lightSensorValue" placeholder="" size="small"
                                    type="number"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="光线传感器阈值">
                                <el-input v-model="bindEngForm.flashLedBrightness" max="3" min="0" placeholder="1-3"
                                    size="small" type="number"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-show="false">
                        <el-col :span="12">
                            <el-form-item label="门禁机密钥">
                                <el-input v-model="bindEngForm.deviceKey" placeholder="" size="small"
                                    type="number"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密码有效期(分钟)">
                                <el-input v-model="bindEngForm.keyExpireMinute" min="1" placeholder="" size="small"
                                    type="number"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="媒体音量">
                                <el-input v-model="bindEngForm.soundVolume" max="100" min="1" placeholder="媒体音量"
                                    size="small" type="number"></el-input>
                                <div class="tips">媒体音量值1-100</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="摄像头预览框">
                                <el-select v-model="facePreviewSize" size="small">
                                    <el-option label="默认" value="0|0">默认</el-option>
                                    <el-option label="小" value="300|400">小(300x400)</el-option>
                                    <el-option label="中" value="650|500">中(650x500)</el-option>
                                    <el-option label="中大" value="740|986">中大(740x984)</el-option>
                                    <el-option label="大" value="1010|720">大(1010x720)</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="开启测温功能">
                                <el-switch v-model="bindEngForm.temperatureMonitorEnable" :active-value="1"
                                    :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="数据脱敏">
                                <el-switch v-model="bindEngForm.dataSensitive" :active-value="1" :inactive-value="0"
                                    active-color="#13ce66" inactive-color="#ff4949">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="bindEngForm.temperatureMonitorEnable == 1">
                        <el-col :span="12">
                            <el-form-item label="体温补偿值">
                                <el-input v-model="bindEngForm.temperatureCompensation" placeholder="体温补偿值" size="small"
                                    type="number">
                                    <span slot="append">℃</span>
                                </el-input>
                                <div class="tips">补偿范围-30.0℃到+30.0℃</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="体温限制开门">
                                <el-input v-model="bindEngForm.temperatureLimit" max="100" min="1" placeholder="体温限制开门"
                                    size="small" type="number">
                                    <span slot="append">℃</span>
                                </el-input>
                                <div class="tips">高于这个温度不能开门</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
                <!--<el-button type="primary" @click="update" v-if="dialogType=='detail'">确 定</el-button>-->
                <!--<el-button v-if="dialogType=='detail'" type="primary" @click="dialogVisible = false">解除绑定</el-button>-->
            </div>
        </el-dialog>
        <!--    表单 结束-->
    </div>
</template>

<script>
import {
  doorguardList, doorDeviceType, areaAll,
  estateAll, deletebymac, deleteData,
  upgrade, alleyAll, floorAll,
  doorguardversion, doorguard, remoteOpens,
  buildingAll, doorguardAdd
} from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonDate from '../../utils/commonData'
const bindEngForm = {
  deviceId: '',
  isAuto: '',
  deviceName: '',
  deviceType: 1, // 设备类型
  installPosition: 1,
  isCamera: 0,
  isEmail: 0,
  deviceUuid: '',
  bluetoothName: '',
  realmDBService: 1,
  estateId: null,
  estateName: null,
  alleyId: null,
  alleyName: '',
  floorId: null,
  floorName: '',
  buildingId: null,
  buildingName: '',
  roomId: null,
  roomNumber: '',
  isWifi: '',
  wifi: '',
  wifiPwd: '',
  deviceNameNew: '',
  deviceIdNew: '',
  engineer: '',
  repairReason: '',
  networkConfig: '',
  direction: 0,
  faceSimilarity: 80,
  controlType: 0,
  doorDeviceType: 0,
  accountId: null,
  networkType: 0,
  livingBody: 1,
  openIrCamera: 0,
  openIrCameraPlus: 0,
  openFlashLed: 2,
  openFlashLedAlways: 0,
  openCameraPreview: 0,
  flashLedBrightness: -1,
  lightSensorValue: -1,
  keyExpireMinute: 5,
  adType: 1,
  longOpenAlert: 0,
  probeInterval: 0,
  soundVolume: 80,
  openFrc: 0,
  facePreviewWidth: 0,
  facePreviewHeight: 0,
  temperatureCompensation: 0,
  temperatureLimit: 0,
  temperatureMonitorEnable: 0,
  areaId: 0,
  dataSensitive: 0

}
export default {

  data () {
    return {
      deviceOptBatch: true, // 禁用
      deviceTypeList: commonDate.deviceTypeList,
      deviceStatusList: commonDate.deviceStatusList,
      total: 10,
      page: 1,
      limit: 5,
      // 搜索查询
      query: {
        deviceType: null, // 1单元机
        doorDeviceType: null,
        status: null, // -1离线状态  1在线
        deviceUuid: null,
        lastLoginTime: null,
        keywords: null // 搜索框
      },
      deviceUpgradeForm: {
        id: null,
        type: null,
        deviceUuid: null,
        uninstallFirst: 0,
        installType: 1,
        doorDeviceType: null
      },
      span: 10,
      clickCount: 0,
      showAdvanceConfig: false,
      dialogVisible: false,
      isUpdateApp: false,
      deviceOperation: false,
      deviceUpgradeDialog: false,
      showSelectDeviceType: false,
      bindEngForm: JSON.parse(JSON.stringify(bindEngForm)),
      rules: commonDate.formRules,
      installPositionList: commonDate.installPositionList,
      batchTargetDeviceLength: 1,
      dialogTitle: '',
      estateId: '',
      targetDeviceName: '',
      targetDevice: '',
      facePreviewSize: '0|0',
      tableData: [], // 表格数据
      failureList: [], // 同步失败的设备
      estateList: [],
      alleyList: [],
      buildingList: [],
      selectedDoorGuardInfo: {},
      doorGuardVersionList: [],
      doorDeviceTypeList: [],
      batchTargetDevice: [] // 批量删除
    }
  },
  created () {
    this.gitestate()
    this.getEstateAll()
    setTimeout(() => {
      this.gitList()
    }, 1);
  },
  methods: {
    // 获取/搜索
    gitList () {
      const data = {
        page: this.page,
        limit: this.limit,
        ...this.query
      }
      doorguardList({ ...data }).then(res => {
        console.log(res)
        if (res.code == 0) {
          const { totalCount, list } = res.page
          this.total = totalCount
          this.tableData = list.map(item => {
            let refreshTimeForat
            if (item.refreshTime) {
              refreshTimeForat = commonFunction.getTimeFormat(+new Date(item.refreshTime), 'YYYY-MM-DD hh:mm:ss')
            }
            return {
              ...item,
              refreshTimeForat
            }
          })
        }
      })
    },
    // 重置
    handleReset () {
      this.limit = 5,
      this.page = 1,
      this.query = {
        deviceType: null,
        status: null,
        deviceId: null,
        lastLoginTime: null
      }
      this.gitList()
    },
    // 获取小区
    gitestate () {
      doorDeviceType().then(res => {
        console.log(res)
        if (res.code == 0) {
          this.doorDeviceTypeList = res.list
        }
      })
    },
    // 表格多选、单选
    selectEvent (selection) {
      const target = []
      selection.map(item => {
        target.push(item.deviceUuid)
      })
      this.deviceOptBatch = target.length <= 0
      this.batchTargetDevice = target
      this.targetDevice = target.join(',')
    },
    // 批量删除
    batchDoorGuardHandler () {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletebymac(this.batchTargetDevice).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.gitList()
        })
      }).catch(() => {
      })
    },

    // 设备型号
    onDeviceTypeChange () {
      this.deviceUpgradeForm.type = null
      this.deviceUpgradeForm.id = null
      this.doorGuardVersionList = []
    },
    deviceTypeChange (val) {

    },
    // 获取软件类型
    getDoorGuardVersionList () {
      if (this.deviceUpgradeForm.type == null) {
        this.deviceUpgradeForm.id = null
        this.doorGuardVersionList = []
        return
      }
      const params = {
        doorDeviceType: this.deviceUpgradeForm.doorDeviceType
      }
      if (this.deviceUpgradeForm.type !== 1 && !this.showSelectDeviceType) {
        params.oemVersion = this.selectedDoorGuardInfo.oemVersion
        params.doorDeviceType = this.selectedDoorGuardInfo.doorDeviceType
      }
      console.log(params)
      doorguardversion(this.deviceUpgradeForm.type, { ...params })
        .then(res => {
          this.deviceUpgradeForm.id = null
          this.doorGuardVersionList = res.list
        })
        .catch(err => {
        })
    },
    onClickCount () {
      this.clickCount += 1
    },
    // 更 新
    clickUpdateAppHandler () {
      if (!this.appUrl) {
        this.$message({
          message: '请填写app更新地址',
          type: 'warning'
        })
        return
      }
      this.deviceHandler(this.appType)
    },
    // 远程开门
    remoteOpen () {
      remoteOpens(this.targetDevice).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      })
    },
    // 操作APP
    deviceHandler (type) {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.optLoading = true
        this.optLoadingText = '数据同步中...'
        doorguard({
          targetDevice: this.targetDevice,
          type: type,
          appUrl: this.appUrl,
          appMd5: this.appMd5,
          updateType: this.updateType
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        })
      })
    },
    getEstateAll () {
      estateAll().then(res => {
        this.estateList = res.map(item => {
          const items = {
            label: item.estateName,
            id: item.estateId,
            value: item.estateId
          }
          return {
            ...items
          }
        })
      })
    },
    // 添加绑定
    showDialog (type, row) {
      this.estateList
      this.alleyList = []
      this.areaList = []
      this.dialogType = type
      this.dialogVisible = true
      this.$nextTick().then(() => {
        this.$refs.bindEngForm.clearValidate()
      })
      if (type === 'bindEng') {
        this.facePreviewSize = '0|0'
        this.dialogTitle = '添加绑定'
        this.bindEngForm = JSON.parse(JSON.stringify(bindEngForm))
        this.bindEngForm.deviceId = this.uuidv1().replace(/-/g, '')
        this.buildingList = []
      } else if (type === 'detail') {
        this.dialogTitle = '设备详情'
        this.bindEngForm = JSON.parse(JSON.stringify(row))

        this.bindEngForm.temperatureCompensation = this.bindEngForm.temperatureCompensation / 10
        this.bindEngForm.temperatureLimit = this.bindEngForm.temperatureLimit / 10
        this.facePreviewSize = this.bindEngForm.facePreviewWidth + '|' + this.bindEngForm.facePreviewHeight
        if (this.bindEngForm.estateId) {
          this.getAlleyList(0, this.bindEngForm.estateId, row.alleyId)
        }
        if (this.bindEngForm.alleyId) {
          this.getBuildingList(0, this.bindEngForm.alleyId, row.buildingId)
        }
        if (this.bindEngForm.buildingId) {
          this.getFloorList(0, this.bindEngForm.buildingId, row.floorId)
        }
        if (this.bindEngForm.floorId) {
          this.getRoomList(0, this.bindEngForm.floorId, row.roomId)
        }
        this.getAllAreaList(this.bindEngForm.estateId, row.areaId)
      }
    },
    estateChange (index, val) {
      this.getAllAreaList(val)
      this.getAlleyList(index, val)
      this.bindEngForm.estateName = commonFunction.getSelectedLabel(val, this.estateList)
      this.bindEngForm.alleyName = null
      this.bindEngForm.alleyId = null
      this.bindEngForm.buildingId = null
      this.bindEngForm.floorId = null
      this.bindEngForm.roomId = null
      this.bindEngForm.areaId = null
    },
    alleyChange (index, val) {
      this.getBuildingList(index, val)
      this.bindEngForm.alleyName = commonFunction.getSelectedLabel(val, this.alleyList)
      this.bindEngForm.buildingId = null
      this.bindEngForm.floorId = null
      this.bindEngForm.roomId = null
    },
    buildingChange (index, val) {
      this.getFloorList(index, val)
      this.bindEngForm.buildingName = commonFunction.getSelectedLabel(val, this.buildingList)
      this.bindEngForm.floorId = null
      this.bindEngForm.roomId = null
    },
    floorChange (index, val) {
      this.getRoomList(index, val)
      this.bindEngForm.floorName = commonFunction.getSelectedLabel(val, this.floorList)
      this.bindEngForm.roomId = null
    },
    roomChange (index, val) {
      this.bindEngForm.roomNumber = commonFunction.getSelectedLabel(val, this.roomList)
    },
    // 确定提交
    save () {
      this.$refs.bindEngForm.validate((valid) => {
        if (valid) {
          if (!this.bindEngForm.deviceType) {
            this.$message({
              message: '请选择门禁类型',
              type: 'error'
            })
            return
          }
          if (!this.bindEngForm.deviceName) {
            this.$message({
              message: '请输入门禁机名称',
              type: 'error'
            })
            return
          }
          if (this.bindEngForm.doorDeviceType == 10 && !this.bindEngForm.id) {
            this.bindEngForm.faceSimilarity = 75
          }
          const split = this.facePreviewSize.split('|')
          this.bindEngForm.facePreviewWidth = split[0]
          this.bindEngForm.facePreviewHeight = split[1]
          this.bindEngForm.position = this.bindEngForm.estateName + this.bindEngForm.alleyName + this.bindEngForm.buildingName
          const form = JSON.parse(JSON.stringify(this.bindEngForm))
          form.temperatureCompensation = form.temperatureCompensation * 10
          form.temperatureLimit = form.temperatureLimit * 10
          doorguardAdd(this.bindEngForm.id, form).then(res => {
            this.dialogVisible = false
            this.$message.success(this.bindEngForm.id ? '编辑成功' : '添加成功')
            this.gitList()
            this.bindEngForm = JSON.parse(JSON.stringify(bindEngForm))
          })
        }
      })
    },
    batchDeviceOperationHandler () {
      this.failureList = []
      this.targetDeviceName = '批量操作'
      this.targetDevice = this.batchTargetDevice.join(',')
      this.deviceOperation = true
    },
    batchDeviceUpgrade () {
      this.deviceUpgradeForm = {
        id: null,
        type: null,
        deviceUuid: null,
        uninstallFirst: 0,
        installType: 1,
        doorDeviceType: null
      }

      this.doorGuardVersionList = []
      this.deviceUpgradeDialog = true
      this.selectedDoorGuardInfo = {}
      this.batchTargetDeviceLength = this.batchTargetDevice.length
      this.deviceUpgradeForm.deviceUuid = this.batchTargetDevice.join(',')
      this.showSelectDeviceType = true
    },
    // 批量升级
    doorGuardVersionUpgrade () {
      this.$confirm('是否确认升级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        upgrade(this.deviceUpgradeForm).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }).catch(err => {
          this.loading.close()
        })
      })
    },
    getAllAreaList (estateId, areaId) {
      areaAll({ estateId: estateId }).then(res => {
        this.areaList = res.list
        if (areaId) {
          this.bindEngForm.areaId = areaId
        }
      })
    },
    getFloorList (index, value, floorId) {
      const params = {
        buildingId: value
      }
      floorAll({ ...params }).then(res => {
        const list = []
        res.map((val, index) => {
          list.push({
            value: val.floorId,
            label: val.floorName
          })
        })
        this.floorList = list
        if (floorId) {
          this.bindEngForm.floorId = floorId
        }
      })
    },
    // 获取小区楼栋
    getAlleyList (index, value, alleyId) {
      const params = {
        estateId: value
      }
      alleyAll({ ...params }).then(res => {
        this.alleyList = []
        this.buildingList = []
        this.floorList = []
        this.roomList = []
        this.bindEngForm.alleyId = null
        res.map((val, index) => {
          this.alleyList.push({
            value: val.alleyId,
            label: val.alleyName
          })
          if (alleyId) {
            this.bindEngForm.alleyId = alleyId
          }
        })
      })
    },
    getBuildingList (index, value, buildingId) {
      const params = {
        alleyId: value
      }
      this.bindEngForm.buildingId = null
      buildingAll({ ...params }).then(res => {
        const buildingList = []
        res.map((val, index) => {
          buildingList.push({
            value: val.buildingId,
            label: val.buildingName
          })
        })
        this.buildingList = buildingList
        if (buildingId) {
          this.bindEngForm.buildingId = buildingId
        }
      })
    },
    // 删除当前行数据
    doorGuardDelete (id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteData([id]).then(res => {
          this.$message.success('删除成功')
          this.gitList()
        })
      }).catch(() => {
      })
    },
    // 分页
    handleSizeChange (val) {
      this.limit = val
      this.gitList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.page = val
      this.gitList()
      console.log(`当前页: ${val}`)
    },
    judgeOnlineStatusType (onlineStatus) {
      if (onlineStatus === -1) {
        return { label: '离线', type: 'danger' }
      } else if (onlineStatus === 1) {
        return { label: '在线', type: 'success' }
      } else {
        return { label: '未使用', type: 'warning' }
      }
    },
    deviceOperationHandler (mac, deviceName) {
      // console.log(mac, deviceName);
      this.failureList = []
      this.targetDeviceName = deviceName
      this.targetDevice = mac
      this.deviceOperation = true
    },
    onItemClick (command, row) {
      // console.log(row, 111111);
      switch (command) {
        case 'card':
          this.onShowDoorGuardFaceDialog(row, 'card')
          break
        case 'edit':
          this.showDialog('detail', row)
          break
        case 'delete':
          this.doorGuardDelete(row.doorGuardId)
          break
      }
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.query {
    padding: 20px;
    padding-bottom: 0px;
}

.content-row {
    overflow: hidden;
}
</style>
